<template>
    <div class="app-container">
    <div style="margin-bottom: 20px;font-size: 20px;">选择：</div>
    <el-container style="height: 100%">
    <el-aside width="200px" style="border: 1px silver solid">
    <!--部门-->
    <el-tree
    :data="data"
    :props="defaultProps"
    :default-expand-all="true"
    @node-click="handleNodeClick">
    </el-tree>
    </el-aside>
    <el-main style="padding:0 0 0 20px;">
    <el-row style="width: 100%" >
    <!--排班日期分页-->
      <el-tag v-for="(item,index) in bookingScheduleList"
              :key="item.id"
              @click="selectDate(item.workDate, index)"
              :type="index == activeIndex ? '' : 'info'"
              style="height: 60px;margin-right: 5px;margin-right:15px;cursor:pointer;">
        {{ item.workDate }} {{ item.dayOfWeek }}<br />
        {{ item.availableNumber }} / {{ item.reservedNumber }}
      </el-tag>

      <!-- 分页 -->
      <el-pagination :current-page="page" :total="total" :page-size="limit" class="pagination"
                     layout="prev, pager, next" @current-change="getPage">
      </el-pagination>
    </el-row>
    <el-row style="margin-top: 20px;" >
      <!-- 排班日期对应的排班医生 -->
      <el-table v-loading="listLoading" :data="scheduleList" border fit highlight-current-row>
        <el-table-column label="序号" width="60" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="职称" width="150">
          <template slot-scope="scope">
            {{ scope.row.title }} | {{ scope.row.docname }}
          </template>
        </el-table-column>
        <el-table-column label="号源时间" width="80">
          <template slot-scope="scope">
            {{ scope.row.workTime == 0 ? "上午" : "下午" }}
          </template>
        </el-table-column>
        <el-table-column prop="reservedNumber" label="可预约数" width="80" />
        <el-table-column prop="availableNumber" label="剩余预约数" width="100" />
        <el-table-column prop="amount" label="挂号费(元)" width="90" />
        <el-table-column prop="skill" label="擅长技能" />
      </el-table>
    </el-row>
    </el-main>
    </el-container>


    </div>
  </template>


<script>
import hospApi from '@/api/hosp'

export default {
  data(){
    return{
      data: [],
      defaultProps:{
        children:'children',
        label:'depname'
      },
      hoscode: null,
      activeIndex: 0,
      depcode: null,
      depname: null,
      workDate: null,

      bookingScheduleList: [],
      baseMap: {},

      page: 1,//当前页
      limit: 7,//每页个数
      total :0,//总页码
      listLoading: true,  //加载状态
      scheduleList: []  //排班数据
    }
  },
  created() {
    //获取路由id
    console.log(this.$route)
    this.hoscode = this.$route.params.hoscode
    //调用方法，根据id查询医院详情
    this.fetachData()
  },
  methods: {
    fetachData(){
      hospApi.getDeptByHoscode(this.hoscode)
        .then(response=>{
          this.data=response.data
          //默认选中第一个科室
          if (this.data.length > 1) {
            this.depcode = this.data[0].children[0].depcode
            this.depname = this.data[0].children[0].depname
            //分页查询
            this.getPage()
          }
      })
    },//分页查询
    getPage(page = 1) {
      this.page = page
      this.workDate = null
      this.activeIndex = 0
      this.getScheduleRuleList()
    },
    //根据医院编号 和 科室编号 ，查询排班规则统计数据
    getScheduleRuleList() {
      hospApi.getScheduleRule(this.page, this.limit, this.hoscode, this.depcode)
        .then(response => {
          console.log(response.data)
          this.bookingScheduleList = response.data.bookingScheduleRuleList
          this.total = response.data.total
          this.baseMap = response.data.baseMap
          // 分页后workDate=null，默认选中第一个
          if (this.workDate == null) {
            this.workDate = this.bookingScheduleList[0].workDate
            //查询排班集合数据
          }
          //查询排班集合数据
          this.getScheduleList()
        })
    },
    //点击科室 查询统计数据
    handleNodeClick(data) {
      //判断是否是大科室 小科室则跳过
      if (data.children) return

      this.depcode = data.depcode;
      this.depname = data.depname;
      this.getPage()

    },
    //点击日期触发方法
    selectDate(workDate, index){
      //查询排班集合
      this.workDate = workDate;
      this.activeIndex =index;
      //查询排班详情
    },
    back(){
      this.$router.push({ path: '/hosp/list' })
    },//获取排班列表数据
    getScheduleList() {
      hospApi.getScheduleDetail(this.hoscode, this.depcode, this.workDate)
        .then(response => {
          this.scheduleList = response.data.list
          this.listLoading = false
          console.log(response.data.list);

        })
    },

    //展示科室信息
    fetchData() {
      hospApi.getDeptByHoscode(this.hoscode).then(resopnse => {
        this.data = resopnse.data.list

        //默认选中第一个科室
        if (this.data.length > 1) {
          this.depcode = this.data[0].children[0].depcode
          this.depname = this.data[0].children[0].depname
          //分页查询
          this.getPage()
        }
      });
    }

  }
}

</script>
<style lang="scss" scoped>
::v-deep .el-tree .el-tree-node__content {
  .el-tree-node__label {
    font-size: 20px;
    font-weight: bold;
  }
}
::v-deep .el-tree .el-tree-node__children {
  .el-tree-node__label {
    font-size: 14px;
    font-weight: 400;
  }
}
::v-deep .el-tree-node.is-current > .el-tree-node__content {
  background-color: #409EFF !important;
  color: white;
}
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
  color: black;
}
</style>
